import React, { Component } from 'react'
import './index.scss'
import { Tabs, WhiteSpace } from 'antd-mobile'
import Homet1 from './homet1'
import Homet2 from './homet2'
import Homet3 from './homet3'
export default class Home extends Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
    tabs: [
      { title: '首页', key: 't1' },
      { title: '动画', key: 't2' },
      { title: '番剧', key: 't3' },
      { title: '国创', key: 't4' },
      { title: '音乐', key: 't5' },
      { title: '舞蹈', key: 't6' },
      { title: '游戏', key: 't7' },
      { title: '知识', key: 't8' },
      { title: '数码', key: 't9' },
    ],
    tabContent: [
      {
        rederInfo: <Homet1/>
      },
      {
        rederInfo: <Homet2/>
      },
      {
        rederInfo: <Homet3/>
      }
    ]
  }
   
  renderContent = tab =>{
    // substring提取字符串中介于两个指定下标之间的字符。
    const titles = parseInt(tab.key.substring(1))
    return (
      <div style={{ height: '1500px', backgroundColor: '#fff' }}>
        {
          this.state.tabContent.map((item, index) => {
            return <div key = {index}>
              {
                titles === index + 1
                ?
                item.rederInfo
                :
                null
              }
            </div>
          }) 
        }
      </div>
    ) 
  };
// 轮播图
  render() {
    return (
      <div className='box'>
        {/* 头部 */}
        <div className= "home-title">
          <div className="timg"></div>
          <div className="inpupti">
            <input type="text" placeholder="  老干妈"/>
          </div>
          <div className="touX">
            <img src={[require("./img/timg.jpg")]} alt=""/>
          </div>
          <div className="ti iconfont icon-youxi">
          </div>
        </div>
        {/* tabs */}
        <div className="title-map">
          <WhiteSpace />
          <Tabs tabs={this.state.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
            {this.renderContent}
          </Tabs>
          <WhiteSpace />
        </div>
      </div>
    )
  }
}
